<template>
    <div>
        <div class="cart">
            <a-icon type="shopping-cart" style="font-size: 23px; vertical-align: middle; " />
            <span style="margin:0 5px;">|</span>
            <span class="log"  @click="showModal" v-if=!$store.state.isLogin>登录/注册</span>
            <span v-else>
                <a-dropdown>
                    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                        {{$store.state.userInfo.nickname}}
                    </a>
                    <a-menu slot="overlay">
                        <a-menu-item>
                            <a href="javascript:;" @click="tomine">个人中心</a>
                        </a-menu-item>
                        <a-menu-item>
                            <a href="javascript:;">我的课程</a>
                        </a-menu-item>
                        <a-menu-item>
                            <a href="javascript:;">我的订单</a>
                        </a-menu-item>
                        <a-menu-item>
                            <a href="javascript:;" @click="logout">退出登录</a>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
            </span>
            <a-avatar icon="user" style="font-size: 28px; vertical-align: middle; margin-left: 5px" v-if="!$store.state.isLogin"/>
            <a-avatar  :src="$store.state.userInfo.avatarUrl"  style="font-size: 28px; vertical-align: middle; margin-left: 5px" v-else />
            <!--登录框-->
            <a-modal v-model="$store.state.showlogin" title=" " @ok="handleOk" :footer="null">
                <a-tabs default-active-key="1" @change="callback">
                    <a-tab-pane key="1" tab="普通登录">
                        <a-form
                                id="components-form-demo-normal-login"
                                :form="form"
                                class="login-form"
                                @submit="handleSubmit"
                        >
                            <a-form-item>
                                <a-input
                                        v-decorator="[
          'userName',
          { rules: [{ required: true, message: '请输入你的账号!' }] },
        ]"
                                        placeholder="请输入账号"
                                >
                                    <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                                </a-input>
                            </a-form-item>
                            <a-form-item>
                                <a-input
                                        v-decorator="[
          'password',
          { rules: [{ required: true, message: '请输入你的密码!' }] },
        ]"
                                        type="password"
                                        placeholder="请输入密码"
                                >
                                    <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                                </a-input>
                            </a-form-item>
                            <a-form-item>
                                <a-button type="primary" html-type="submit" class="login-form-button">
                                    登录
                                </a-button>
                            </a-form-item>
                        </a-form>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab=" 手机登录" force-render>
                        <a-form
                                id="components-form-demo-normal-login"
                                :form="form"
                                class="login-form"
                                @submit="handleSubmit"
                        >
                            <a-form-item>
                                <a-input
                                        placeholder="请输入手机号" v-model="getnumber">
                                    <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                                </a-input>
                            </a-form-item>
                            <a-form-item>
                                <a-input type="text" placeholder="请输入验证码" class="phonebox" v-model="code">
                                </a-input>
                                <a-button type="primary" class="phonebutton" @click="getcode">
                                    获取验证码
                                </a-button>
                            </a-form-item>
                            <a-form-item>
                                <a-button type="primary" @click="loginnum">
                                    登录
                                </a-button>
                            </a-form-item>
                        </a-form>


                    </a-tab-pane>
                </a-tabs>
                <div class="foo">
                    <span style="float: left" @click="showModalencroll">立即注册</span>
                    <span style="float: right" @click="showModalpwd">忘记密码？</span>
                </div>
            </a-modal>
            <!--            注册框-->
            <a-modal v-model="showenroll" title=" " @ok="handleOkencroll" :footer="null">
                <div class="encroll"><div>普通注册</div></div>
                <a-form-model
                        ref="ruleForm"
                        :model="form1"
                        :rules="rules"
                        :label-col="labelCol"
                        :wrapper-col="wrapperCol"
                >
                    <a-form-model-item ref="name" label="账号:" prop="name">
                        <a-input
                                v-model="form1.name"
                                @blur="() => {$refs.name.onFieldBlur();}" placeholder="请输入账号(6-20位，非纯数字)!"/>
                    </a-form-model-item>
                    <a-form-model-item ref="name" label="密码:" prop="pwd">
                        <a-input
                                v-model="form1.pwd"
                                @blur="() => {$refs.name.onFieldBlur();}" text="password" placeholder="请输入密码(6-20位，非汉字)!"/>
                    </a-form-model-item>
                    <a-form-model-item ref="name" label="确认密码:" prop="apwd">
                        <a-input
                                v-model="form1.apwd"
                                @blur="() => {$refs.name.onFieldBlur();}" text='password' placeholder="请再次输入你的密码!"/>
                    </a-form-model-item>
                    <a-form-model-item ref="name" label="昵称:" prop="nickname">
                        <a-input
                                v-model="form1.nickname"  type="text"
                                @blur="() => {$refs.name.onFieldBlur();}" placeholder="请输入你的昵称!"/>
                    </a-form-model-item>
                    <a-form-model-item ref="name" label="手机号:" prop="phone">
                        <a-input-group compact
                                       @blur="() => {$refs.name.onFieldBlur();}"
                        >
                            <a-select default-value="+86" style="width: 30% ;">
                                <a-select-option value="+86">
                                    +86
                                </a-select-option>
                            </a-select>
                            <a-input style="width: 70%" default-value=""  placeholder="请输入你的手机号!"   v-model="form1.phone"/>
                        </a-input-group>
                    </a-form-model-item>
                    <a-form-model-item ref="name" label="验证码:" prop="number">
                        <a-input
                                type="text"
                                v-model="form1.number"
                                @blur="() => {$refs.name.onFieldBlur();}" class="phonebox"  placeholder="请输入你的验证码!"/>
                        <a-button type="primary" class="phonebutton" @click="encrollcode">获取验证码</a-button>
                    </a-form-model-item>
                    <a-form-model-item :wrapper-col="{ span: 32, offset: 2 }">
                        <a-button type="primary" @click="onSubmit">
                            注册
                        </a-button>
                    </a-form-model-item>
                </a-form-model>
                <div class="foo">
                    <span style="float: right" @click="showModal">去登录</span>
                </div>
            </a-modal>
            <!--忘记密码框-->
            <a-modal v-model="showpwd" title=" " @ok="handleOkpwd" :footer="null">
                <div style="width: 100%;text-align: center">
                    <p> 忘记密码</p>
                </div>
                <a-input placeholder="请输入账号" class="inputbox"  v-model="loginName"/>
                <a-input-password placeholder="请输入新密码" class="inputbox" v-model="password"/>
                <a-input-password placeholder="请再次输入新密码" class="inputbox"/>
                <a-input placeholder="请输入手机号" class="inputbox" v-model="mobile"/>
                <a-form-item :validate-status="passwordError() ? 'error' : ''" :help="passwordError() || ''" class="inputbox">
                    <a-input  type="text"
                              placeholder="请输入验证码" class="phonebox" v-model="code2">
                    </a-input>
                    <a-button type="primary" class="phonebutton" @click="forgetchick">
                        获取验证码
                    </a-button>
                </a-form-item>
                <a-button type="primary" class="inputbox" style="width: 40%;float: left" @click="changepwd">
                    确定更改密码
                </a-button>
                <div class="foo">
                    <span style="float: left" @click="showModalencroll">立即注册</span>
                    <span style="float: right" @click="showModal">去登录</span>
                </div>
            </a-modal>
        </div>
    </div>
</template>

<script>
    import {encroll, encrollmunber, forgetCode, forgetPwd, loginnumber, pwdlogin} from "../../api/api";
    import {mobilelogin} from '../../api/api';
    // import {getUserInfo} from '../../api/api'
    import {logoutlist} from '../../api/api'
    const options = [
        {
            value: '+86',
            label: '+86',
        },
    ];
    export default {
        name: "Cart",
        beforeCreate() {
            this.form = this.$form.createForm(this, { name: 'normal_login' });
            this.form = this.$form.createForm(this, { name: 'register' });
        },
        data(){
            return {
                getnumber:'',
                showenroll:false,
                showpwd:false,
                code:'',
                //    注册
                labelCol: { span: 4 },
                wrapperCol: { span: 14 },
                other: '',
                form1:{
                    name: '',
                    pwd: '',
                    apwd: '',
                    nickname: '',
                    phone: '',
                    number: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入你的账户！', trigger: 'blur' },
                    ],

                    pwd: [
                        { required: true, message: '请输入你的密码！', trigger: 'blur' },
                        { min: 6, max: 10, message: 'Length should be 6 to 10', trigger: 'blur' },
                    ],
                    apwd: [
                        { required: true, message: '请确认你的密码！', trigger: 'blur' },
                        { min: 6, max: 10, message: 'Length should be 6 to 10', trigger: 'blur' },
                    ],
                    nickname: [
                        { required: true, message: '请输入你的昵称！', trigger: 'blur' },
                        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
                    ],
                    phone: [
                        { required: true, message: '请输入你的手机号！', trigger: 'blur' },
                    ],
                    number: [
                        { required: true, message: '请输入你的验证码！', trigger: 'blur' },
                    ],
                },
                options,
                //    密码
                loginName:'',
                mobile:'',
                password:'',
                code2:''

            };
        },
        methods:{
            callback(key) {
                console.log(key);
            },
            //登录
            showModal() {
                this.$store.commit("changShowlogin",true)
                this.showenroll=false;
                this.showpwd=false;
            },
            handleOk(e) {
                console.log(e)
                // this.showlogin = false;
                this.$store.commit("changShowlogin",false);
            },
            //注册
            showModalencroll(){
                this.showenroll=true;
                // this.showlogin=false;
                this.$store.commit("changShowlogin",false);
                this.showpwd=false;
            },
            handleOkencroll(){
                this.showenroll=true;
                this.showpwd=false;
            },
            //忘记密码
            showModalpwd(){
                this.showpwd=true;
                // this.showlogin=false;
                this.$store.commit("changShowlogin",false);
            },
            handleOkpwd(){
                this.showpwd=false;

            },
            passwordError() {
                const { getFieldError, isFieldTouched } = this.form;
                return isFieldTouched('password') && getFieldError('password');
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                    }
                    //密码登录
                    pwdlogin(values.userName,values.password).then(res=>{
                        console.log(res)
                        if(res.code==0){
                            console.log("登录")
                            this.$message.success('登录成功，欢迎回来！')
                            this.$store.commit("changLogin",{userInfo:res.userInfo});
                            this.$store.commit("changShowlogin",false);
                        }else {
                            this.$message.error('登录失败！')
                        }
                    })
                });
            },
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        // alert('submit!');
                        //注册
                        encroll(this.form1.name,this.form1.number,this.form1.phone,this.form1.pwd,this.form1.nickname).then(res=>{
                            console.log(res)
                            if(res.code==0){
                                this.$message.success(res.msg)
                            }else {
                                this.$message.error("注册失败！")
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            tomine(){
                this.$router.push('/mine');
            },
            //退出登录
            logout(){
                this.$message.success('退出成功！')
                logoutlist().then(res=>{
                    console.log(res)
                    if(this.$route.path!='/index'){
                        this.$router.push('/index');
                    }
                    this.$store.commit("changeLoginF");
                })

            },
            //登录时的验证码
            getcode(){
                loginnumber(this.getnumber).then(res=>{
                    console.log(res)
                    if(res.code==0){
                        this.$message.success(res.msg)
                    }else {
                        this.$message.error(res.msg)
                    }
                })

            },
            //手机号登录
            loginnum(){
                mobilelogin(this.getnumber,this.code).then(res=>{
                    console.log(res)
                    if(res.code==0){
                        console.log("登录")
                        this.$message.success('登录成功，欢迎回来！')
                        this.$store.commit("changLogin",{userInfo:res.userInfo});
                        this.$store.commit("changShowlogin",false);
                    }else {
                        this.$message.error('登录失败！')
                    }
                })
            },
            //    注册验证码
            encrollcode(){
                console.log(this.form1.phone)
                encrollmunber(this.form1.phone).then(res=>{
                    console.log(res)
                    if(res.code==0){
                        this.$message.success(res.msg)
                    }else {
                        this.$message.error(res.msg)
                    }
                })
            },
            //    忘记密码验证码
            forgetchick(){
                forgetCode(this.loginName,this.mobile).then(res=>{
                    console.log(res)
                    if(res.code==0){
                        this.$message.success(res.msg)
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            },
            //更改密码
            changepwd(){
                forgetPwd(this.loginName,this.password,this.mobile,this.code2).then(res=>{
                    console.log(res)
                    if(res.code==0){
                        this.$message.success(res.msg)
                    }else {
                        this.$message.error(res.msg)
                    }
                })
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.form.validateFields();

            });
        },
        created() {
            this.$store.dispatch("asyncChangeLogin")
        }
    }
</script>

<style scoped lang="less">
    #components-form-demo-normal-login .login-form {
        max-width: 300px;
    }
    #components-form-demo-normal-login .login-form-forgot {
        float: right;
    }
    #components-form-demo-normal-login .login-form-button {
        width: 100%;
    }
    div {
        width: 100%;
    }
    .cart>span {
        font-size: 15px;
        vertical-align: middle;
    }
    /deep/.ant-modal-body {
        padding: 30px;
        text-align: center;
    }
    /deep/.ant-modal-header {
        border-bottom: none;
    }
    /deep/.ant-modal-footer{
        border-top: none;
    }
    /deep/.ant-tabs-bar {
        border-bottom: none;
    }
    /deep/ .ant-tabs-nav {
        width: 100%;
    }
    /deep/ .ant-tabs-nav .ant-tabs-tab {
        margin: unset;
        width: 50%;
        border-bottom: 3px solid transparent;
        text-align: center;
    }
    /deep/ .ant-tabs-nav .ant-tabs-tab:hover {
        border-bottom: 4px solid #00cf8c;
    }
    /deep/.ant-tabs-ink-bar{
        height: 3px;
    }
    /deep/.ant-modal-content {
        width:400px;
    }
    /deep/ .ant-btn-primary {
        width: 100%;
    }
    .foo{
        overflow: hidden;
        margin-bottom: 5px;
    }
    .foo>span:hover{
        color: #00cf8c;
    }
    /deep/ant-input{
        width: 100px;
        float: left;
    }
    .phonebox {
        width: 60%;
        float: left;
    }
    .phonebutton {
        width: 35%;
        float: right;
        border-radius: 8%;
    }
    /deep/.ant-form-inline .ant-form-item > .ant-form-item-control-wrapper{
        width: 100%;
    }
    /deep/.ant-col-4{
        width: 25%;
    }
    /deep/.ant-col-14{
        width: 75%;
    }
    .encroll {
        color:#00cf8c;
        width: 100%;
        height: 30px;
        text-align: center;
        margin-bottom: 10px;
    }
    .encroll>div {
        border-bottom: 2px solid #00cf8c;
    }
    .inputbox {
        margin-bottom: 20px !important;
    }
    /deep/a {
        color: black;
    }
</style>